<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>72商城</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <style>
    .header-top{height:50px;width:100%;background:#ff9f2f;display:-webkit-box;-webkit-box-align:center;}
    .header-top-img{display:-webkit-box;height:50px;}
    .header-top-search{display:-webkit-box;-webkit-box-flex:1;color:#FFFFFF; border:1px solid #f37b1d;height:30px;margin:0 0 0 10px;padding:0 10px;background-color:#f37b1d;border-radius:10px;outline-style:none;}
    #header-bottom .current{color:rgb(224,29,32);}
    .header-bottom-ul{display:-webkit-box;height:40px;position:relative;border-bottom:1px solid rgb(200,200,200);}
    #header-bottom-ul-dot{height:5px;width:5px;border-radius:100%; background-color:rgb(224,29,32);position:absolute;top:30px;left:16.6%;transition:all .5s;-webkit-transition:all .5s;}
    .header-bottom-ul li{display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;-webkit-box-flex:1;}
    .header-bottom-ul span{display:-webkit-box;}
    .main-banner{height:157px;background:rgb(222,222,222);position:relative;}
    .footer{min-height:1000px;background:rgb(111,222,111);}
    </style>
</head>


<body>
    <header id="header">
        <div class="header-top">
             <img class="header-top-img"    onclick="api.closeWin();" src="images/logo.png" alt="LOGO">
            <input class="header-top-search" type="text" value="" placeholder="搜索商品" tapmode onclick="doSearch();">
            <img class="header-top-img" src="images/cart.png" alt="cart" tapmode   onclick="opencart();">
        </div>
        <div class="header-bottom" id="header-bottom">
            <ul class="header-bottom-ul">
                <li tapmode="" onclick="setFGI('frame_index_home')"><span class="current" id="header-bottom-ul-li-span-0">首页</span></li>
                <li tapmode="" onclick="setFGI('frame_index_cate')"><span class="" id="header-bottom-ul-li-span-1">分类</span></li>
                <!--<li tapmode="" onclick="setFGI('frame_index_honor')"><span class="" id="header-bottom-ul-li-span-2">团购</span></li>-->
                <li tapmode="" onclick="setFGI('myorder')"><span class="" id="header-bottom-ul-li-span-2">订单</span></li>
                <span id="header-bottom-ul-dot"></span>
            </ul>
        </div>
    </header>
</body>




<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>

<script>
   
   
    apiready = function() {
        
        openFrameGroup();
        
    }

    var current_symbol = 0;
    var previous_symbol = 0;
    var frameJson = {
        'index':0,
        'frame_index_cate':1,
//      'frame_index_honor':2,
        'myorder':2
    };
    var headerDotLeftJson = {
//      0:'12.3%',
//      1:'37.3%',
//      2:'62.3%',
//      3:'87.3%'
		0:'16.6%',
        1:'50%',
        2:'75%',
    }
    // console.log(frameJson['frame_index_home']);

   var setFGI = function(name) {
        
        if(name=='myorder'){
           
            var account = $api.getStorage('account');
		    if (!account) {
		         api.openWin({
			        name: 'login',
			        url: 'login.html'
			     });
			     
			     return;
		    }else{
		       
	             api.openWin({
			        name: 'order',
			        url: "../web/order_win.html",
			        bounces: false,
			        vScrollBarEnabled:false,
			        hScrollBarEnabled:false,
			        reload: true,
			       }
			    );
		    
		    }
        
        
            
            return;
        }
        
        api.setFrameGroupIndex({
            name:'home_group',
            index:frameJson[name],
            scroll:true
        });
        
    }
    
    var openFrameGroup = function(){
        var header = $api.byId('header');
        var offset = $api.offset(header);
        api.openFrameGroup({
            name:'home_group',
            background:'rgb(255,255,255)',
            scrollEnabled:false,
            rect:{
                x:0,
                y:offset.h,
                w:'auto',
                h:'auto'
            },
            index:0,
            preload:0,
            frames:[{
                name:'index',
                url:'index.html',
                pageParam:{},
                bgColor:'rgb(255,255,255)',
                bounces:false
            },
            {
                name:'frame_index_cate',
                url:'category.html',
                pageParam:{},
                bgColor:'rgb(255,255,255)',
                 bounces:false
           },
//         {
//              name:'frame_index_honor',
//              url:'activity.html',
//              pageParam:{},
//              bgColor:'rgb(255,255,255)',
//              bounces:false
//          },
           {
                name:'user',
                url:'../web/user.html',
                pageParam:{},
                bgColor:'rgb(255,255,255)',
                bounces:false
            }]
        },function(ret,err){
            var header_bottom_ul_dot = document.getElementById('header-bottom-ul-dot');
            header_bottom_ul_dot.style.left=headerDotLeftJson[ret.index];

            var i = document.getElementById('header-bottom').getElementsByTagName('span').length;
            var header_bottom_ul_li_span = document.getElementById('header-bottom').getElementsByTagName('span');
            while(i--){
                header_bottom_ul_li_span[i].className = '';
            }

            var el = document.getElementById('header-bottom-ul-li-span-'+ret.index);
            $api.addCls(el,'current');
        });

    }


    //搜索
    function doSearch(){
       var obj = api.require('UISearchBar');
		obj.open({
		    placeholder: '请输入搜索关键字',
		    historyCount: 10,
		    showRecordBtn: true,
		    texts: {
		        cancelText: '取消',
		        clearText: '清除搜索记录'
		    },
		    styles: {
		        navBar: {
		            bgColor: '#FFFFFF',
		            borderColor: '#ccc'
		        },
		        searchBox: {
		            bgImg: '',
		            color: '#000',
		            height: 44
		        },
		        cancel: {
		            bg: 'rgba(0,0,0,0)',
		            color: '#D2691E',
		            size: 16
		        },
		        list: {
		            color: '#696969',
		            bgColor: '#FFFFFF',
		            borderColor: '#eee',
		            size: 16
		        },
		        clear: {
		            color: '#000000',
		            borderColor: '#ccc',
		            size: 16
		        }
		    }
		}, function(ret){
		    if(ret.eventType == 'record'){
		        //api.alert({msg: '点击了录音按钮'});
		    } else if(ret.eventType == 'search') {
		        //api.alert({msg: '点击了搜索按钮'});
		        //setListFrameTitle('搜索\"'+ret.text+'\"');
		       // toListFrame('',0,ret.text);
		        openWin('productlist',{'keyword':ret.text});
		        
		    } else if(ret.eventType == 'history') {
		        //api.alert({msg: '点击了历史记录'});
		        openWin('productlist',{'keyword':ret.text});
		    } else {
		        alert(ret.text);
		    }
		});
    
    };
    
    
</script>
</html>